<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <!-- 1.获取Vue数据仓库中存在的的正常数据 -->
    <h2>获取Vue数据仓库中存在的的正常数据</h2>
    <p>{{ id }}</p>
    <p>{{ name }}</p>
    <p>{{ gender }}</p>
    <p>{{ flag }}</p>
    <p>{{ hobbies }}</p>
    <p>{{ address }}</p>

    <!--
        2.获取Vue数据仓库中存在的的非正常数据
        对于null与undefined,页面什么都不显示,空白表示
        对于NaN,直接在页面中显示NaN
     -->
    <h2>获取Vue数据仓库中存在的的非正常数据</h2>
    <p>{{ test1 }}</p>
    <p>{{ test2 }}</p>
    <p>{{ test3 }}</p>

    <!--
        3.获取Vue数据仓库中不存在的数据
        此时会直接报错,页面不显示
        不影响其他数据
    -->
    <h2>获取Vue数据仓库中不存在的数据</h2>
    <p>{{ username }}</p>
    <p>{{ address.province }}</p>
    <!--
        4.在插值表达式中直接定义固定值
        对于字符串,需要加引号,否则会认为是数据仓库的key
    -->
    <h2>在插值表达式中直接定义固定值</h2>
    <p>{{ 1 }}</p>
    <p>{{ true }}</p>
    <p>{{ 'admin' }}</p>
    <!--
        5.使用JS表达式
    -->
    <h2>使用JS表达式</h2>
    <p>{{ 3+2 }}</p>
    <p>{{ 3-2 }}</p>
    <p>{{ 3*2 }}</p>
    <p>{{ 3/2 }}</p>
    <p>{{ 3%2 }}</p>
    <p>{{ age < 18 ? "未成年" : "成年了" }}</p>
    <p>{{ address.province }}</p>
    <p>{{ hobbies[2] }}</p>
    <p>{{ 3 > 2 && 2 > 3}}</p>
    <p>{{ 3 > 2 || 2 > 3}}</p>

    <!-- 6.JS内置对象 -->
    <h2>JS内置对象</h2>
    <p>{{ new Date() }}</p>
    <p>{{ Math.random() }}</p>
    <p>{{ Math.PI }}</p>

</div>
</body>
<script>
    new Vue({
        el: "#d1",
        data:{
            id: 1,
            name: "李小白",
            gender: "男",
            flag: true,
            hobbies: ["吃饭","睡觉","学Java"],
            address: {"province":"江苏","city":"南京"},
            test1:null,
            test2:NaN,
            test3:undefined,
            age:20
        }
    })
</script>
</html>